<template>
    <div class="wh-100 d-flex">
        <div  :class="showRight ? 'w-80' : 'w-100'" class="h-100 card" style="background-color: white">
            <div class="mt-8 mb-8  d-flex-between-center" >
                <div  class=" h-100 d-flex-align-center">
                    <Button  >刷新</Button>
                    <Button >批量删除</Button>
                    <Button type="dashed" @click="openTip=!openTip">{{ openTip ? "关闭提示" : "开启提示" }}</Button>
                    <Button >导出所选数据</Button>
                    <Button >导出全部数据</Button>
                    <Button  class="mr-auto">下载当前查询数据</Button>
                </div>
                <Button class="mr-8" :icon="showRight?`ios-arrow-forward`:`ios-arrow-back`"
                        @click.native="showRight =!showRight"
                        type="primary">
                </Button>
            </div>
            <div v-show="openTip">
                <Alert show-icon>
                    已选择 <span class="select-count">{{ selectList.length }}</span> 项
                    <a class="select-clear" @click="clearSelectAll">清空</a>
                </Alert>
            </div>
            <div v-ref-height="refHeight" class="h-80 w-100">
                <el-table
                    ref="filterTable"
                    :header-cell-style="{ background: '#f0f0f0', color: '#606266' }"
                    empty-text="暂无数据"
                    :data="tableData"
                    :height="refHeight.value"
                    border
                    style="width: 100%">
                    <el-table-column
                        v-for="column in tableColumns"
                        :type="column.type"
                        :index="column.index"
                        :prop="column.key"
                        :label="column.title"
                        :width="column.width"
                        :min-width="column.minWidth"
                        :fixed="column.fixed"
                    ></el-table-column>
                </el-table>
            </div>
            <div  class="w-100 h-10 d-flex-around-center pt-8">
                <Page :current="searchForm.pageNumber"
                      :total="searchForm.total"
                      :page-size="searchForm.pageSize"
                      @on-change="changePage"
                      @on-page-size-change="changePageSize"
                      :page-size-opts="[10,20,50,100,200]"
                      size="small" show-total
                      show-elevator
                      show-sizer>
                </Page>
            </div>
        </div>
        <div v-show="showRight"   class="w_20-12 rightStyle h-100  ml-12 card" >
            <div v-if="isSearch" class="wh-100 pl-8 pr-8">
                <div  class=" pt-12 fs-16  fw-6 ">
                    查询区
                </div>
                <div class="mt-52">
                    <Form ref="searchForm" :model="searchForm"  :label-width="130">
                        <FormItem label="姓名" prop="xm" >
                            <Input  type="text" v-model="searchForm.name" placeholder="请输入姓名" clearable />
                        </FormItem>
                        <FormItem label="姓名" prop="xm" >
                            <Input  type="text" v-model="searchForm.name" placeholder="请输入姓名" clearable />
                        </FormItem>
                        <FormItem label="姓名" prop="xm" >
                            <Input  type="text" v-model="searchForm.name" placeholder="请输入姓名" clearable />
                        </FormItem>
                        <FormItem style="margin-left:-35px;" >
                            <Button  type="primary" icon="ios-search">搜索</Button>
                            <Button >重置</Button>
                        </FormItem>
                    </Form>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    // name: 'accountIVeDoneIt'
    data() {
        return {
            refHeight:{value:0},
            openTip: true, // 显示提示
            showRight: true,
            loading: false,
            isSearch: true,
            selectList: [], // 多选数据
            tableData:  [{
                date: '2016-05-02',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄',
                tag: '家'
            },
            ], // 表格数据
            tableColumns: [
                // 表头
                {
                    type: "selection",
                    width: 60,
                    align: "center"
                },
                {
                    type: "index",
                    title: "序号",
                    width: 60,
                    align: "center"
                },
                {
                    title: "院校名称",
                    key: "gxmc",
                    minWidth: 180,
                    sortable: false,
                },
                {
                    title: "院系名称",
                    key: "yxmc",
                    minWidth: 120,
                    sortable: false,
                },
                {
                    title: "专业",
                    key: "zy",
                    minWidth: 120,
                    sortable: false,
                },
                {
                    title: "身份证号",
                    key: "idCard",
                    minWidth: 180,
                    sortable: false,
                },
                {
                    title: "姓名",
                    key: "name",
                    minWidth: 100,
                    sortable: false,
                },
                {
                    title: "考生号",
                    key: "ksh",
                    minWidth: 140,
                    sortable: false,
                },
                {
                    title: "学号",
                    key: "xh",
                    minWidth: 140,
                    sortable: false,
                },
                {
                    title: "档案转递类型",
                    key: "transferType",
                    minWidth: 120,
                    sortable: false,
                },
                {
                    title: "档案转递单位名称",
                    key: "unitName",
                    minWidth: 120,
                    sortable: false,
                },
                {
                    title: "档案转递单位所在地",
                    key: "unitLocationName",
                    minWidth: 120,
                    sortable: false,
                },
                {
                    title: "档案转递详细地址",
                    key: "unitAddress",
                    minWidth: 120,
                    sortable: false,
                },
                {
                    title: "档案转递单位邮编",
                    key: "unitZip",
                    minWidth: 120,
                    sortable: false,
                },
                {
                    title: "档案转递单位联系人",
                    key: "unitContact",
                    minWidth: 120,
                    sortable: false,
                },
                {
                    title: "档案转递单位联系电话",
                    key: "unitTel",
                    minWidth: 120,
                    sortable: false,
                },
                {
                    title: '审核节点',
                    key: 'hName',
                    minWidth: 120
                },
                {
                    title: '审核意见',
                    key: 'comment',
                    align: 'center',
                    minWidth: 130
                },
                {
                    title: '耗时',
                    key: 'duration',
                    align: 'center',
                    width: 100,
                    sortable: true,
                },
                {
                    title: "申请时间",
                    key: "startTime",
                    minWidth: 120,
                    sortable: false,
                },
                {
                    title: "审核时间",
                    key: "endTime",
                    minWidth: 120,

                    sortable: false,
                },
                {
                    title: "审核结果",
                    key: "result",
                    minWidth: 120,

                    sortable: false,
                    fixed: "right",
                },
                {
                    title: "操作",
                    slot: "action",
                    minWidth: 120,

                    align: "center",
                    fixed: "right",
                }
            ],
            searchForm: { // 搜索框初始化对象
                pageNumber: 1, // 当前页数
                pageSize: 50, // 页面大小
                total:0,
            },
        }
    },
    mounted() {
    },
    methods: {
        getDataList(){
            // this.loading = true;
            // 数据接口({ ...this.searchForm }).then(res => {
            //     console.log("res……", res);
            //     this.data = res.result.result;
            //     this.searchForm.total = res.result.total;
            //     this.loading = false;
            // })
        },
        changeSelect(e) {
            this.selectList = e;
            console.log("selectList", this.selectList);
        },
        clearSelectAll() {
            this.$refs.table.selectAll(false);
        },
        changePage(v) {
            this.searchForm.pageNumber = v;
            this.getDataList();
        },
        changePageSize(v) {
            this.searchForm.pageSize = v;
            this.getDataList();
        },
    }
};
</script>




<style scoped lang="less">
//form表单间距统一修改
.ivu-form-item {
    margin-bottom: 0.01rem !important;
}

.card{
    background: white;
    transition: box-shadow .3s ease, transform .2s ease;
}
.card:hover {
    box-shadow: 0 4px 8px #23232333;
}
.w_20-12{
    width: calc(20% - 12px);
}
</style>